<template>
  <div class="page-404">
    <el-result
        class="result-box"
        icon="error"
        title="404"
        sub-title="哎呀，您访问的页面不存在了"
    >
      <template #extra>
        <div class="action-buttons">
          <el-button
              type="primary"
              size="large"
              @click="goHome"
              class="animated-btn"
          >
            <el-icon><HomeFilled /></el-icon>
            返回首页
          </el-button>

          <el-button
              size="large"
              @click="goBack"
              class="animated-btn"
          >
            <el-icon><Back /></el-icon>
            返回上一页
          </el-button>
        </div>
      </template>
    </el-result>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { HomeFilled, Back, Search } from '@element-plus/icons-vue'

const router = useRouter()

const goHome = () => router.push('/dashboard')
const goBack = () => router.back()
</script>

<style scoped lang="scss">
.page-404 {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;

  .result-box {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    animation: fadeInUp 0.8s ease;

    :deep(.el-result__icon) {
      svg {
        width: 120px;
        height: 120px;
      }
    }

    :deep(.el-result__title) {
      font-size: 48px;
      color: #606266;
      margin: 20px 0;
    }

    :deep(.el-result__subtitle) {
      font-size: 18px;
      color: #909399;
    }
  }

  .action-buttons {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;

    .el-button {
      transition: all 0.3s ease;
      padding: 12px 24px;
      font-size: 16px;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
    }
  }

  .search-box {
    margin-top: 40px;
    width: 500px;
    max-width: 80%;

    :deep(.el-input-group__append) {
      background-color: var(--el-color-primary);
      color: white;

      .el-button {
        color: white;
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .result-box {
    width: 90%;
    padding: 20px !important;

    :deep(.el-result__title) {
      font-size: 36px !important;
    }

    .search-box {
      width: 100% !important;
    }
  }
}
</style>